<template>
    <div class="box pageBox">
        <div class="top">
            <h2>用户列表</h2>
        </div>
        <div class="inputbox">
            <div class="input">
                <span class="inputList">用户名：<a-input placeholder="请输入用户名" v-model="par.username"/></span>
                <span class="inputList">手机号：<a-input placeholder="请输入手机号" v-model="par.phone"/></span>
                <span class="select">注册日期：<a-range-picker @change="onDate"/></span>
                <span class="button">
					<a-button type="primary" @click="search">查询</a-button>
					<a-button @click="reset">重置</a-button>
				</span>
            </div>
        </div>
        <div class="pitch-on">
            <a-icon type="info-circle" style="color: #2DB7F5;margin-right: 10px;"/>
            已选择<span>0</span>项
        </div>
        <a-table :pagination="show" :rowSelection="rowSelection" :dataSource="dataSource" :columns="columns"
                 class="table">
            <template slot="operation" slot-scope="text, record">
                <a-button @click="onLook(record.id)" type="primary" ghost v-if="listButton.editor">查看</a-button>
                <a-button @click="onDelete(record.id)" type="danger" ghost v-if="listButton.cancel">删除</a-button>
            </template>
        </a-table>
        <div class="paging">
            <div class="total">共 {{total}} 条记录 第 {{par.pageSize}} / {{allPage}} 页</div>
            <a-pagination showQuickJumper showSizeChanger :defaultCurrent="1" :defaultPageSize="par.limit" :total=total
                          @change="onchange"/>
        </div>
    </div>
</template>

<script>
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            let isPitch = selectedRows.length
        },
        onSelect: (record, selected, selectedRows) => {
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        },
    };

    export default {
        data() {
            return {
                dataSource: [{
                    nick_name: 222,
                }],
                total: 0,
                columns: [{
                    title: '用户ID',
                    dataIndex: 'id',
                },
                    {
                        title: '姓名',
                        dataIndex: 'username',
                    },
                    {
                        title: '手机号',
                        dataIndex: 'phone',
                    },
                    {
                        title: '注册时间',
                        dataIndex: 'createTime',
                    },
                    {
                        title: '操作',
                        dataIndex: 'operation',
                        scopedSlots: {
                            customRender: 'operation'
                        },
                    }
                ],
                par: {
                    pageSize: 1,
                    limit: 10,
                    username: '',
                    phone: '',
                    start_date: '',
                    end_date: ''
                },
                parId: {
                    id: ''
                },
                rowSelection,
                show: false,
                pitch: '',
                allPage: '',
                listButton: {
                    editor: "",//查看
                    cancel: ""//删除
                }
            }
        },
        created() {
            //按钮数据
            let titleName = sessionStorage.getItem("stairH1");
            this.$ajax.get("/admin/queryBtn", {params: {"title": titleName.trim()}}).then(res => {
                for (var i = 0; i < res.data.data.length; i++) {
                    if (res.data.data[i].title == "查看") {
                        this.listButton.editor = res.data.data[i].title
                    }
                    if (res.data.data[i].title == "删除") {
                        this.listButton.cancel = res.data.data[i].title
                    }
                }
            })
            this.getData();
        },
        methods: {
            //获取数据
            getData() {
                this.$ajax
                    .get("/admin/user/list", {
                        params: this.par
                    })
                    .then(res => {
                        this.dataSource = res.data.data.content
                        this.total = res.data.data.totalElements
                        this.allPage = res.data.data.totalPages
                    })
            },
            //查看用户详情
            onLook(id) {
                //				console.log(id)
                this.$router.push({
                    path: "/userLook",
                    name: "userLook",
                    params: {
                        id: id
                    }
                });
            },
            //删除
            onDelete(id) {
                this.parId.id = id
                let that = this
                this.$confirm({
                    title: '操作确认',
                    content: '你确定要删除该用户吗？',
                    onOk: () => {
                        that.$ajax
                            .get("/admin/user/delete",  {
                                params: that.parId
                            })
                            .then(res => {
                                if (res.code == 200) {
                                    that.$message.success('删除成功!')
                                    that.getData();
                                } else {
                                    that.$message.error(res.data.message);
                                }
                            })
                            .catch(error => {
                                that.$message.error('服务器繁忙,请稍后重试!');
                            })
                    },
                });
            },
            //翻页
            onchange(pageNumber) {
                this.par.pageSize = pageNumber
                this.getData();
            },
            //改变页面条数
            onShowSizeChange(current, pageSize) {
                this.par.limit = pageSize
                this.getData();
            },
            //搜索
            search() {
                this.getData();
            },
            //重置
            reset() {
                this.par.username = '',
                    this.par.phone = '',
                    this.par.start_date = '',
                    this.par.end_date = '',
                    this.getData();
            },
            //日期
            onDate(date, dateString) {
                this.par.start_date = dateString[0].replace(/\-/g, "/")
                this.par.end_date = dateString[1].replace(/\-/g, "/")
            }
        }
    }
</script>

<style scoped>
    .input {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .pitch-on {
        margin-top: 20px;
        padding: 6px 10px;
        width: 100%;
        border: 1px solid #2DB7F5;
        border-radius: 5px;
    }

    .pitch-on span {
        display: inline-block;
        padding: 0 8px;
        color: #2DB7F5;
    }
</style>
